<template>
	<view class="container">
		<banner :reData="swiperList"></banner>
		<!-- <u-button class="btn" type="primary" shape="circle" text="立即预定"></u-button> -->
		<view class="btn">
			<navigator url="../book/book"><u-button text="立即预定" size="large" type="primary" shape="circle"></u-button></navigator>
		</view>
		<view class="type">
			<u-gap height="10" bgColor="#f4f4f5"></u-gap>
			<view class="menu">
				<sport-icon></sport-icon>
			</view>
			<u-gap height="10" bgColor="#f4f4f5"></u-gap>
		</view>
		<view class="coupon">
			<list-title name="领取优惠券" :isLink="true"></list-title>
			<view class="content">
				<u-grid :border="false">
					<u-grid-item style="margin-top: 40rpx;">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="add" :size="22"></u-icon>
						<text class="grid-text">test</text>
					</u-grid-item>
					<u-grid-item style="margin-top: 40rpx;">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" name="add" :size="22"></u-icon>
						<text class="grid-text">test</text>
					</u-grid-item>
				</u-grid>
			</view>
			<u-gap height="10" bgColor="#f4f4f5"></u-gap>
		</view>
		<u-tabs :list="tabList" :scrollable="false"></u-tabs>
		<view class="news-list">
			<u-list style="height: 400rpx;">
				<u-list-item>
					<view class="item-content">
						<view class="left">
							<view class="title">我用十年青春,赴你最后之约</view>
							<view class="desc">1234567</view>
							<view class="info">
								<view>阅读量：84</view>
								<view style="margin-right: 20rpx;">更新时间：2021-12-12 12:12:12</view>
							</view>
						</view>
						<view class="right">
							<u--image radius="4" lazy-loading width="140rpx" height="140rpx" :showLoading="true"
								src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
						</view>
					</view>
				</u-list-item>

				<u-gap height="10" bgColor="#f4f4f5"></u-gap>
				<u-list-item>
					<view class="item-content">
						<view class="left">
							<view class="title">我用十年青春,赴你最后之约</view>
							<view class="desc">12345671234567123456712345671234567</view>
							<view class="info">
								<view>阅读量：84</view>
								<view style="margin-right: 20rpx;">更新时间：2021-12-12 12:12:12</view>
							</view>
						</view>
						<view class="right">
							<u--image radius="4" lazy-loading width="140rpx" height="140rpx" :showLoading="true"
								src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	//主题色  1195db
	import banner from "../../components/banner/banner.vue"
	import sportIcon from "../../components/sportIcon/sportIcon.vue"
	import listTitle from "../../components/list-title/list-title.vue"
	export default {
		components: {
			banner,
			sportIcon,
			listTitle
		},
		data() {
			return {
				tabList: [{
						name: "门店动态"
					},
					{
						name: "体育新闻"
					}
				],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
			}
		},
		onLoad() {
		uni.setTabBarBadge({
		  index: 0,
		  text: '10'
		})	
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;

		.btn {
			// width: 80%;
			margin-top: 25rpx;
			margin-left: 45rpx;
			margin-right: 45rpx;
		}

		.type {
			margin: 40rpx 0;

			.menu {
				padding: 20rpx 0;
			}
		}

		.content {
			height: 200rpx;
		}

		.news-list {
			width: 90%;
			margin: 10rpx 30rpx;

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				justify-items: center;
				align-items: center;
				margin: 20rpx 0;

				.left {
					width: 75%;

					.desc {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 30rpx;
						line-height: 70rpx;
						color: #606266;
						// #ifdef MP-WEIXIN
						display: inline;
						// #endif
					}

					.info {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						justify-items: center;
						align-items: center;
						font-size: 24rpx;
						color: #909399;
					}
				}

				.right {
					width: 15%;
					margin-right: 50rpx;
				}
			}
		}


	}
</style>
